import parentNode from './parentNode'
import themeColor from "./theme-color";
import Icon from './icon'
class Message {
    static num = 0;//消息个数
    static parentNode = new parentNode(); //父盒子
    constructor({ type, duration, message, showClose, closed }) {
        Message.num++;
        this.type = type;
        if (duration <= 0) {
            this.duration = 0;
        } else {
            this.duration = duration || 3000;
        }
        this.message = message;
        if (showClose == true) {
            this.showClose = true
        } else {
            this.showClose = false;
        }
        this.closedEvent = closed || (() => { })
        this.init();
    }

    init() {
        let element = document.createElement('div');
        element.className = 'message';
        element.classList.add('fade');
        // 父盒子添加信息
        Message.parentNode.appendChild(element);

        // 添加icon
        element.appendChild(new Icon(this.type).getElement())
        // 添加title
        let title = document.createElement('span');
        // 添加文本
        let message = document.createElement('span');
        // 添加时间
        let time = document.createElement('div');
        // 添加进度条   
        let timeRest = document.createElement('div');
        // 关闭按钮
        let closeBtn = document.createElement('div');
        title.className = 'title'
        switch (this.type) {
            case "success":
                title.innerText = "成功";
                title.style.color = themeColor.success;
                message.style.color = themeColor.success;
                timeRest.style.background = themeColor.success;
                break
            case "warning":
                title.innerText = "警告";
                title.style.color = themeColor.warning;
                message.style.color = themeColor.warning;
                timeRest.style.background = themeColor.warning;
                break
            case "error":
                title.innerText = "失败";
                title.style.color = themeColor.error;
                message.style.color = themeColor.error;
                timeRest.style.background = themeColor.error;
                break
            case "info":
                title.innerText = "提示";
                title.style.color = themeColor.info;
                message.style.color = themeColor.info;
                timeRest.style.background = themeColor.info;
                break
            default:
                title.innerText = "提示";
                title.style.color = themeColor.info;
                message.style.color = themeColor.info;
                timeRest.style.background = themeColor.info;
        }
        element.appendChild(title);

        closeBtn.className = 'close';
        if (!this.showClose) {
            closeBtn.style.display = 'none'
        }
        closeBtn.onclick = this.close.bind(this, element)
        element.appendChild(closeBtn);

        message.innerText = this.message;
        message.className = 'text'
        element.appendChild(message);


        time.innerText = new Date().format('yyyy-MM-dd hh:mm:ss')
        time.className = 'time'
        element.appendChild(time);

        // 获取动画时间 单位 s
        this.animateDuration = parseInt(getComputedStyle(element)['animationDuration'])

        // 小于等于0 无进度条且无自动关闭
        if (this.duration <= 0) return

        this.duration = this.duration + this.animateDuration * 1000;



        // 进度条
        element.appendChild(timeRest);
        let timeRestBar = setTimeout(() => {
            timeRest.className = 'timaBar';
            timeRest.style.animation = `timebar-left-right ${(this.duration) / 1000}s`;
            clearTimeout(timeRestBar)
        }, 1000)


        // 移除节点
        this.timeBar = setTimeout(() => {
            this.destory(element);
            clearTimeout(this.timeBar);
        }, this.duration)
    }

    // 点击关闭节点
    close(element, e) {
        //清除自动关闭定时器
        clearTimeout(this.timeBar);
        this.destory(element);
    }

    // 销毁节点
    destory(element) {
        // 给动画
        element.classList.remove('fade');
        element.classList.add('fade-reverse');
        // 获取动画时间
        let timeBar1 = setTimeout(() => {
            Message.num--;
            // 设置高度
            Message.parentNode.removeChild(element);
            this.closedEvent();
            clearTimeout(timeBar1);
        }, this.animateDuration * 900)
    }
}

export default Message